<template>
  <div>
    <cusDialog ref="dialog" width="400px" title="参数设置" headCss="float:left;" confrimText="保存" @confrim="confrimHandler"
      @hideHandler="hideHandler">
      <el-form :model="settingForm" ref="settingFormRef" label-width="100px" :rules="rules">
        <div v-for="(item, index) in settingForm.deviceSegmentVOList" :key="index">
          <el-form-item :label="item.mealSegmentName" :prop="'deviceSegmentVOList.' + index + '.time'"
            :rules="rules.time">
            <el-time-picker v-model="item.time" format="HH:mm" value-format="HH:mm" is-range range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>

        </div>

        <el-form-item label="留样时长:" prop="deviceConfigParam.keepDurationHours">
          <el-input v-model.number="settingForm.deviceConfigParam.keepDurationHours" placeholder=""
            style="width: 100px;">
          </el-input> &nbsp; h
        </el-form-item>
        <el-form-item label="开门等待:" prop="deviceConfigParam.openDoorWaitSeconds">
          <el-input v-model.number="settingForm.deviceConfigParam.openDoorWaitSeconds" placeholder=""
            style="width: 100px;">
          </el-input> &nbsp; s
        </el-form-item>
        <el-form-item label="门柜层数:" prop="deviceConfigParam.doorNum">
          <el-input v-model.number="settingForm.deviceConfigParam.doorNum" placeholder="" style="width: 100px;">
          </el-input> &nbsp; 层
        </el-form-item>

        <el-form-item label="留样餐段:">
          <el-checkbox :label="item.mealSegmentName" v-model="item.isKeep" :true-label="1" :false-label="0"
            v-for="(item, index) in settingForm.deviceSegmentVOList" :key="index" />
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqDeviceCofing, reqSetConfig } from "@/api/business/device";
const router = useRouter();

const originForm = () => ({
  deviceConfigParam: {
    keepDurationHours: "",
    openDoorWaitSeconds: "",
    doorNum: ""
  },
  deviceSegmentVOList: [
    {
      gmtEnd: "",
      gmtStart: "",
      isKeep: 0,
      machineCode: "",
      mealSegmentId: "",
      mealSegmentName: "",
      time: []
    }
  ],
  machineCode: "",
});

const settingForm = ref(originForm());

const rules = reactive({
  time: { required: true, message: "此项必填", trigger: "blur", pattern: /.+/, },
  'deviceConfigParam.keepDurationHours': [{ required: true, message: "此项必填", trigger: "blur" }, {
    pattern: '^[0-9]*[1-9][0-9]*$', type: 'number', message: '留样时长只能为正整数', trigger: 'blur'
  }],
  'deviceConfigParam.openDoorWaitSeconds': [{ required: true, message: "此项必填", trigger: "blur" },
  { pattern: '^[0-9]*[1-9][0-9]*$', type: 'number', message: '开门等待只能为正整数', trigger: 'blur' }],
  'deviceConfigParam.doorNum': [{ required: true, message: "此项必填", trigger: "blur" },
  { pattern: '^[0-9]*[1-9][0-9]*$', type: 'number', message: '门柜层数只能为正整数', trigger: 'blur' }]
})

const settingFormRef = ref()

const confrimHandler = () => {
  settingFormRef.value.validate((valid => {
    if (valid) {
      let { deviceConfigParam, deviceSegmentVOList, machineCode } =
        settingForm.value;
      let deviceSegmentReqList = deviceSegmentVOList.map(el => {
        el.gmtStart = el.time[0];
        el.gmtEnd = el.time[1];
        return el
      })
      reqSetConfig({
        deviceConfigParam,
        deviceSegmentReqList,
        machineCode,
      }).then((res) => {
        if (res.code == 1) {
          ElMessage.success("设置成功");
          dialog.value.show = false;
        } else {
          ElMessage.info(res.msg);
        }
      });
    }
  }))
};
const dialog = ref();
const show = (code) => {
  settingForm.value.machineCode = code;
  getDeviceCofing();
  dialog.value.show = true;
};
const hideHandler = () => {
  settingForm.value = originForm();
  settingFormRef.value.resetFields()
};
// 获取设备信息
const getDeviceCofing = () => {
  reqDeviceCofing({
    machineCode: settingForm.value.machineCode,
  }).then((res) => {
    if (res.code == 1) {
      settingForm.value.deviceConfigParam = res.data.deviceConfigParam;
      settingForm.value.deviceSegmentVOList = res.data.deviceSegmentVOList;
      settingForm.value.deviceSegmentVOList.forEach((el) => {
        let time = [];
        time[0] = el.gmtStart;
        time[1] = el.gmtEnd;
        el.time = time
      });
    }
  });
};
defineExpose({ show });
</script>

<style lang="scss" scoped></style>